<template>
    <div>
        <el-table
            ref="table"
            :data="memberData"
            border
            header-cell-class-name="main-table-header"
            @selection-change="onSelectionChange"
            @row-click="onRowClick"
        >
            <el-table-column type="selection" width="39"></el-table-column>
            <el-table-column align="center" label="客户名称" prop="name" />
            <el-table-column align="center" label="病历号" prop="medicalNo" />
            <el-table-column
                width="100px"
                align="center"
                label="电话号码"
                prop="mainPhone"
            />
            <el-table-column
                align="center"
                label="会员等级"
                prop="memberLevelName"
            />
        </el-table>
        <el-pagination
            style="margin-top:20px;"
            :current-page.sync="page"
            :page-size="limit"
            :total="total"
            @current-change="onCurrentChange"
            layout="total,jumper,prev,pager,next"
        ></el-pagination>
        <el-row type="flex" justify="center" style="margin-top:30px">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm"
                >确认</el-button
            >
            <el-button type="default" icon="el-icon-close" @click="onCancel"
                >取消</el-button
            >
        </el-row>
    </div>
</template>

<script>
import { get } from "@/assets/js/http.js";

export default {
    name: "select-member",
    data() {
        return {
            page: 1,
            limit: 10,
            total: 0,
            memberData: [],
            selection: []
        };
    },
    mounted() {
        this.getMemberData();
    },
    methods: {
        onCurrentChange(index) {
            this.page = index;
            this.getMemberData();
        },
        async getMemberData() {
            const data = await get({
                url: "/admin/user.RealmeritUser/index",
                loading: true,
                params: {
                    page: this.page,
                    limit: this.limit
                }
            });
            const list = data.list;
            this.total = data.total;
            list.forEach(item => {
                item.firstCostDate = item.firstCostDate?.slice(0, 10);
                item.latestCostDate = item.latestCostDate?.slice(0, 10);
            });
            this.memberData = list;
        },
        onConfirm() {
            this.$emit("select-member", this.selection);
            this.$parent.$emit("update:visible", false);
            this.$refs.table.clearSelection();
        },
        onCancel() {
            this.$parent.$emit("update:visible", false);
            this.$refs.table.clearSelection();
        },
        onSelectionChange(selection) {
            this.selection = selection;
        },
        onRowClick(row) {
            this.$refs.table.toggleRowSelection(row);
        }
    }
};
</script>